<template>
  <div>
    <el-dialog :title="managerId===-1?'新增经纪':'编辑经纪'" :visible="isShowDialog" width="30%" @close="btnCancle">
      <el-form ref="managerTop" label-position="top" label-width="40px" :model="managerObj" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="managerObj.name" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="managerObj.email" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="managerObj.phone" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="managerObj.address" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="managerObj.desc" />
        </el-form-item>
      </el-form>
      <el-form label-position="left">
        <el-form-item label="封面">
          <ImageUpload ref="cover" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancle">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addAgent, getAgentDetail, updateAgent } from '@/api/agent'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      required: true
    },
    managerId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      managerObj: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '姓名为1-10位', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 1, message: '描述最少为一位', trigger: 'blur' }
        ]
      }

    }
  },
  watch: {
    async managerId() {
      console.log('this.managerId', this.managerId)
      if (this.managerId !== -1) {
        // 获取回显数据
        const { data } = await getAgentDetail(this.managerId)
        this.managerObj = data
        // 图片回显 有图片才回显
        if (data.image) {
          this.$refs.cover.fileList = [{ url: data.image }]
        }
        console.log(74, '回显数据', data)
      }
    }
  },
  created() {

  },
  methods: {
    async btnCancle() {
      // 清空表单
      this.managerObj = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }

      // 通知父组件更新数据
      this.$emit('update')
      // 清空图片
      setTimeout(() => {
        this.$refs.cover.fileList = []
      }, 2000)
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
    },
    async btnOK() {
      // 表单校验
      await this.$refs.managerTop.validate()
      if (this.managerId === -1) {
        // 新增
        const res = await addAgent({
          ...this.managerObj,
          image: this.$refs.cover.fileList[0] ? this.$refs.cover.fileList[0].url : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F13%2F20211113180144_3f687.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641729500&t=61851f4dd83a4f79ed0b83dcd36349e6'
        })
        setTimeout(() => {
          console.log(119, this.$refs.cover.fileList[0])
          if (!(this.$refs.cover.fileList[0] && this.$refs.cover.fileList[0].url)) {
            this.$message.warning('您没有添加图片,使用默认图片')
          }
        }, 500)
        console.log(74, '新增', res)
      } else {
        // 编辑
        const res = await updateAgent({
          ...this.managerObj,
          created_at: new Date().toLocaleDateString,
          updated_at: new Date().toLocaleDateString
        })
        console.log(105, res)
      }
      // 提示用户
      this.$message.success(this.managerId === -1 ? '新增成功' : '编辑成功')
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
      // 通知父组件更新数据
      this.$emit('update')
    }
  }
}
</script>

<style>
img{
  object-fit: contain;
}
</style>
